<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .adver {
            width: 300px;
            /* height: 400px; */
            background-color: aquamarine;
        }

        .adver-header {
            overflow: hidden;
            line-height: 20px;
            font-size: 13px;
            padding: 0 5px;
        }

        .adver-header .adver-title {
            float: left;
        }

        .adver-header .adver-close {
            float: right;
        }

        .adver-main img {
            width: 100%;
        }

        .adver-1 {
            position: fixed;
            right: 5px;
            bottom: 5px;
        }

        .adver-2 {
            position: fixed;
            right: 5px;
            top: 5px;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>
            单价: <input type="text" v-model="price">
        </p>
        <p>
            数量: <input type="text" v-model="num">
        </p>
        <!-- <p>结算: {{(price*num).toFixed(2)}}</p> -->

        <p>结算:  <laowang-pay :pay="(price*num).toFixed(2)"></laowang-pay> </p>
        

    </div>
</body>
<script>
    /* 
        小广告
            (1) 页面加载完毕 等待5s 小广告显示
            (2) 倒计时10s后关闭小广告
            (3) 重复1-2
            (4) 点击关闭按钮 => 清除小广告 => 重复 1 2 3
    
    */


    let laowangPay = {
        props:["pay"],
        template:`<span>{{payFormat}}</span>`,
        computed:{
            payFormat(){
                return new Intl.NumberFormat("zh-cn").format(this.pay);
            }
        }
    }





    var vm = new Vue({
        el: "#app",
        data: {
            price: "2999",
            num: 1
        },
        components: {
            laowangPay,
        },

    })





</script>

</html>